<div class="hs-container" *ngIf="device && dailyHistory">
  <div class="hs-title" >
    <div class="d-flex d-md-flex d-sm-block d-xs-block align-items-center">
      <div class="d-2">
        <h2>{{device.name}}</h2>
        <p>{{'Show for now and others' | translate}}</p>
      </div>
      <div class="d-2 d-sm-block current-item">
        <div class="d-flex flex-column" *ngIf="dailyHistory.length">
          <div class="d-2">
            {{dailyHistory[activeIndex].date | date:'fullDate'}}
          </div>
          <div class="d-2 current-item-statistic-unit">
            <span  *ngIf="dailyHistory[activeIndex].status" [class]="dailyHistory[activeIndex].status === 'up'? 'text-success changeRate' : 'text-danger changeRate'">
              <i [class]="'icon-arrow_drop_' + dailyHistory[activeIndex].status"></i>
              {{dailyHistory[activeIndex].changeRate}} %
            </span>
            {{dailyHistory[activeIndex].average}}
            <span class="unit">
                Avg
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex overflow-hidden position-relative">
    <div data-simplebar class="p-2 hs-table">
      <table class="table table-hover">
        <tbody>
          <tr *ngFor="let serie of dailyHistory; let i = index" (click)="setChart(i, serie.date)" [ngClass]="{'active': i === activeIndex }">
            <td>
              {{serie.date | date:'MMM - dd'}} 
              <span *ngIf="serie.status" [class]="serie.status === 'up'? 'text-success' : 'text-danger'">
                <i [class]="'icon-arrow_drop_' + serie.status"></i> 
                {{serie.changeRate}} %
              </span>
            </td>
            <td>
                {{serie.average}}°
              <span class="unit">
               Avg
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="p-2 hs-chart">
      <div id="history-statistics"></div>
    </div>
  </div>
</div>